<template>
    <div>
        <van-nav-bar title="优惠券中心" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
  <!-- 显示不同类别的优惠券列表 -->
  <div v-if="active === 0" class="favorites-list">
    <div v-for="(item, index) in couponInfList" :key="index" class="favorite-item">
      <div class="favorite-info">
        <h3>{{ item.name }}</h3>
        <div style="color: #1E88E5">{{ item.type }}</div>
        <span>有效期至</span>
        {{ item.endTime }}
        <div class="coupon-point">
          使用积分: {{ item.point }}积分
        </div>
      </div>
      <button @click="removeFavorite(index)" class="remove-btn">
        <span class="material-icons">消费条件: {{ item.exceptionMessage }}</span>

      </button>
      <div>
        <span>优惠力度：</span>
        <div class="coupon-point">
          {{ item.couponValue }}元
        </div>
      </div>
      <div >
        <el-button @click="userGetCoupon(item.id,item.point)">领取</el-button>
      </div>
    </div>

  </div>


</template>
<script setup>
import { ref } from 'vue'
import { CouponList ,GetCoupon} from '@/api/market.js'
import { showToast } from 'vant';
var couponInfList = ref([])
var couponDivShow=ref(false)
var couponDivExShow=ref(false)
var active=ref(0)
var queryM = ref({
    pageNum: 1,
    pageSize: 20,
    expireType: 0,
    status: 1
})

var GetCouponData=ref({
    couponId:'0'
})

const onClickLeft = () => history.back();

function userGetCoupon(id,point) {
    GetCouponData.value.couponId=id;
    GetCouponData.value.point=point;
    GetCoupon(GetCouponData.value)
        .then(res => {
            console.info("领取优惠券" + res)
            if (res.data.code == 200000) {
                getCouponInf();
                showToast('领取成功');
            } else {
                showToast(res.data.errorMessage);
            }
        })
}

getCouponInf();
function getCouponInf() {
    couponDivShow.value=true;
    couponDivExShow.value=false;
    couponInfList.value=[];
    queryM.value.expireType=0;
    CouponList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                couponInfList.value = res.data.data.data
            } else {
                //错误提示框
            }
        })
}

function getCouponInfExpired() {
    couponDivShow.value=false;
    couponDivExShow.value=true;
    couponInfList.value=[]
    queryM.value.expireType=1;
    queryM.value.status=2
    CouponList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                couponInfList.value = res.data.data.data
            } else {
                //错误提示框
            }
        })
}

//模仿--图片效果而已
//实际代码中，从后端接口返回图片地址展示
const isGray = ref(false);
function makeGray() {
    // todo 调用后端 重新渲染列表
    if (isGray.value == false) {
        isGray.value = true;
        getCouponInfExpired();
    } else {
        getCouponInf();
        isGray.value = false
    }
}
</script>
<style>
/* .is-gray {
  filter: grayscale(100%);
} */

.van-cell__title {
    font-size: 18px;
    color: aliceblue;
    
}
.van-cell-group__title{
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder; 
    background-color: rgb(236, 51, 51)
}
.van-cell__label {
    font-size: 14px;
    color: black
}

.van-cell__value {
    font-size: 16px;
    font-weight: bolder; 
    color: #CFAE00
}
</style>
<style scoped>
/* 页面整体布局 */
.coupons-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 切换优惠券类别按钮 */
.coupon-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.coupon-buttons button {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.coupon-buttons button.active {
  background-color: #1E88E5;
  color: white;
  border-color: #1E88E5;
}

.coupon-buttons button:hover {
  background-color: #e0e0e0;
}

/* 每张优惠券的卡片样式 */
.favorite-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

/* 按钮样式 */
.remove-btn {
  background-color: #FF6347;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #e53e3e;
}
</style>